import React from 'react'
import PropTypes from 'prop-types'
import './example.scss'

class Example extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props)
    this.state = {}
  }
  componentWillMount() {}
  componentDidUpdate() {}
  componentDidMount() {
    this.showPop()
  }
  stopScroll(e) {
    e.stopPropagation()
    e.preventDefault()
  }
  showPop() {
    document.body.addEventListener('touchmove', this.stopScroll, {
      passive: false,
    })
    document.body.style.overflow = 'hidden'
  }
  componentWillUnmount() {
    document.body.removeEventListener('touchmove', this.stopScroll)
    //添加事件监听时添加了passive参数，在ios9中移除事件监听也需要加此参数
    document.body.removeEventListener('touchmove', this.stopScroll, {
      passive: true,
    })
    document.body.style.overflow = 'auto'
  }

  render() {
    return (
      <div className="example-container">
        <div
          className="example-containe-bkg"
          onClick={() => this.props.hidePop()}
        ></div>
        <div className="example-main-area">
          <div className="example-desc">
            <div className="example-desc-title">作品展示</div>
            <img
              onClick={() => this.props.hidePop()}
              className="close-icon"
              src={require('../../static/upload/icon_tupian_guanbi.png')}
              alt=""
            />
            <div className="example-desc-text">
              为了帮助评委更好地判断作品，可以从以下几个角度进行拍摄。同时请注意保证照片背景整洁，不要让无关物品干扰作品呈现。
            </div>
            <div className="example-desc-imgs">
              <div className="desc-img-item">
                <img
                  className="img-item-main"
                  src={require('../../static/example/img_shifan_a1@3x.png')}
                  alt=""
                />
                <div className="img-item-desc">正面图</div>
              </div>
              <div className="desc-img-item">
                <img
                  className="img-item-main"
                  src={require('../../static/example/img_shifan_d1@3x.png')}
                  alt=""
                />
                <div className="img-item-desc">侧45度图</div>
              </div>
              <div className="desc-img-item">
                <img
                  className="img-item-main"
                  src={require('../../static/example/img_shifan_c1@3x.png')}
                  alt=""
                />
                <div className="img-item-desc">背面图</div>
              </div>
              <div className="desc-img-item">
                <img
                  className="img-item-main"
                  src={require('../../static/example/img_shifan_e1@3x.png')}
                  alt=""
                />
                <div className="img-item-desc">参考建筑</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default Example
